<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="generator" content="pandoc" />


<meta name="author" content="Yiying Wang" />

<meta name="date" content="2017-03-15" />

<title>Basic Plots 14 - Force Chart</title>

<script src="libs/jquery-1.11.3/jquery.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href="libs/bootstrap-3.3.5/css/cosmo.min.css" rel="stylesheet" />
<script src="libs/bootstrap-3.3.5/js/bootstrap.min.js"></script>
<script src="libs/bootstrap-3.3.5/shim/html5shiv.min.js"></script>
<script src="libs/bootstrap-3.3.5/shim/respond.min.js"></script>
<script src="libs/navigation-1.1/tabsets.js"></script>
<script src="libs/htmlwidgets-0.8/htmlwidgets.js"></script>
<script src="libs/echarts-2.2.7/echarts-all.js"></script>
<script src="libs/charts-ext-2.2.7/main.js"></script>
<script src="libs/charts-ext-2.2.7/BMap.js"></script>
<script src="libs/echarts-binding-0.2/echarts.js"></script>


<style type="text/css">code{white-space: pre;}</style>
<style type="text/css">
div.sourceCode { overflow-x: auto; }
table.sourceCode, tr.sourceCode, td.lineNumbers, td.sourceCode {
  margin: 0; padding: 0; vertical-align: baseline; border: none; }
table.sourceCode { width: 100%; line-height: 100%; }
td.lineNumbers { text-align: right; padding-right: 4px; padding-left: 4px; color: #aaaaaa; border-right: 1px solid #aaaaaa; }
td.sourceCode { padding-left: 5px; }
code > span.kw { color: #007020; font-weight: bold; } /* Keyword */
code > span.dt { color: #902000; } /* DataType */
code > span.dv { color: #40a070; } /* DecVal */
code > span.bn { color: #40a070; } /* BaseN */
code > span.fl { color: #40a070; } /* Float */
code > span.ch { color: #4070a0; } /* Char */
code > span.st { color: #4070a0; } /* String */
code > span.co { color: #60a0b0; font-style: italic; } /* Comment */
code > span.ot { color: #007020; } /* Other */
code > span.al { color: #ff0000; font-weight: bold; } /* Alert */
code > span.fu { color: #06287e; } /* Function */
code > span.er { color: #ff0000; font-weight: bold; } /* Error */
code > span.wa { color: #60a0b0; font-weight: bold; font-style: italic; } /* Warning */
code > span.cn { color: #880000; } /* Constant */
code > span.sc { color: #4070a0; } /* SpecialChar */
code > span.vs { color: #4070a0; } /* VerbatimString */
code > span.ss { color: #bb6688; } /* SpecialString */
code > span.im { } /* Import */
code > span.va { color: #19177c; } /* Variable */
code > span.cf { color: #007020; font-weight: bold; } /* ControlFlow */
code > span.op { color: #666666; } /* Operator */
code > span.bu { } /* BuiltIn */
code > span.ex { } /* Extension */
code > span.pp { color: #bc7a00; } /* Preprocessor */
code > span.at { color: #7d9029; } /* Attribute */
code > span.do { color: #ba2121; font-style: italic; } /* Documentation */
code > span.an { color: #60a0b0; font-weight: bold; font-style: italic; } /* Annotation */
code > span.cv { color: #60a0b0; font-weight: bold; font-style: italic; } /* CommentVar */
code > span.in { color: #60a0b0; font-weight: bold; font-style: italic; } /* Information */
</style>
<style type="text/css">
  pre:not([class]) {
    background-color: white;
  }
</style>


<style type="text/css">
h1 {
  font-size: 34px;
}
h1.title {
  font-size: 38px;
}
h2 {
  font-size: 30px;
}
h3 {
  font-size: 24px;
}
h4 {
  font-size: 18px;
}
h5 {
  font-size: 16px;
}
h6 {
  font-size: 12px;
}
.table th:not([align]) {
  text-align: left;
}
</style>

<link rel="stylesheet" href="/home/madlogos/R/x86_64-pc-linux-gnu-library/3.3/knitr/misc/vignette.css" type="text/css" />

</head>

<body>

<style type = "text/css">
.main-container {
  max-width: 940px;
  margin-left: auto;
  margin-right: auto;
}
code {
  color: inherit;
  background-color: rgba(0, 0, 0, 0.04);
}
img {
  max-width:100%;
  height: auto;
}
.tabbed-pane {
  padding-top: 12px;
}
button.code-folding-btn:focus {
  outline: none;
}
</style>



<div class="container-fluid main-container">

<!-- tabsets -->
<script>
$(document).ready(function () {
  window.buildTabsets("TOC");
});
</script>

<!-- code folding -->






<div class="fluid-row" id="header">



<h1 class="title toc-ignore">Basic Plots 14 - Force Chart</h1>
<h4 class="author"><em>Yiying Wang</em></h4>
<h4 class="date"><em>2017-03-15</em></h4>

</div>

<div id="TOC">
<ul>
<li><a href="#introduction"><span class="toc-section-number">1</span> Introduction</a></li>
<li><a href="#function-call"><span class="toc-section-number">2</span> Function Call</a></li>
<li><a href="#showcase"><span class="toc-section-number">3</span> Showcase</a><ul>
<li><a href="#data-preparation"><span class="toc-section-number">3.1</span> Data Preparation</a><ul>
<li><a href="#matrix-mode"><span class="toc-section-number">3.1.1</span> Matrix Mode</a></li>
<li><a href="#nodelink-mode"><span class="toc-section-number">3.1.2</span> Node/link Mode</a></li>
</ul></li>
<li><a href="#force-chart"><span class="toc-section-number">3.2</span> Force Chart</a><ul>
<li><a href="#force-with-curve"><span class="toc-section-number">3.2.1</span> Force with Curve</a></li>
<li><a href="#force-with-line"><span class="toc-section-number">3.2.2</span> Force with Line</a></li>
<li><a href="#force-with-timeline"><span class="toc-section-number">3.2.3</span> Force with Timeline</a></li>
</ul></li>
</ul></li>
<li><a href="#futher-setup"><span class="toc-section-number">4</span> Futher Setup</a></li>
</ul>
</div>

<p>First, you should load <code>recharts</code>:</p>
<div class="sourceCode"><pre class="sourceCode r"><code class="sourceCode r"><span class="kw">library</span>(recharts)</code></pre></div>
<div id="introduction" class="section level1">
<h1><span class="header-section-number">1</span> Introduction</h1>
<p>Force plot includes 2 basic types:</p>
<ul>
<li>Force chart with curve</li>
<li>Force chart with line</li>
</ul>
<table id="intro">
<tr>
<td>
<div id="htmlwidget-6e16e53e10a0c31ac321" style="width:400px;height:300px;" class="echarts html-widget"></div>
<script type="application/json" data-for="htmlwidget-6e16e53e10a0c31ac321">{"x":{"series":[{"type":"force","name":"Connection","roam":"move","itemStyle":{"normal":{"label":{"show":true,"textStyle":{"color":"#333"}},"nodeStyle":{"brushType":"both","strokeColor":"rgba(255,215,0,0.4)"},"linkStyle":{"type":"curve"}},"emphasis":{"label":{"show":false},"nodeStyle":[],"lineStyle":[]}},"minRadius":8,"maxRadius":20,"nodes":[{"category":0,"name":"曾麟书","value":3},{"category":1,"name":"曾国藩","value":9},{"category":2,"name":"曾纪泽","value":3},{"category":2,"name":"曾纪鸿","value":3},{"category":3,"name":"曾广珊","value":3},{"category":0,"name":"俞文葆","value":3},{"category":1,"name":"俞明震","value":6},{"category":1,"name":"俞明颐","value":3},{"category":1,"name":"俞明诗","value":3},{"category":0,"name":"陈宝箴","value":6},{"category":1,"name":"陈三立","value":3},{"category":2,"name":"陈寅恪","value":9},{"category":2,"name":"陈衡恪","value":3},{"category":2,"name":"俞大维","value":3},{"category":2,"name":"俞大拔","value":3},{"category":2,"name":"俞大纲","value":3},{"category":2,"name":"俞大缜","value":3},{"category":1,"name":"曾国潢","value":3},{"category":2,"name":"曾纪梁","value":3},{"category":3,"name":"曾广祚","value":3},{"category":4,"name":"曾昭抡","value":6},{"category":2,"name":"俞大絪","value":3},{"category":2,"name":"傅斯年","value":6},{"category":2,"name":"俞大彩","value":3},{"category":0,"name":"蒋介石","value":9},{"category":1,"name":"蒋经国","value":9},{"category":3,"name":"俞扬和","value":3},{"category":2,"name":"蒋孝章","value":3},{"category":4,"name":"俞祖声","value":3},{"category":2,"name":"俞大纯","value":3},{"category":1,"name":"曾国荃","value":6},{"category":2,"name":"曾广江","value":3},{"category":3,"name":"曾昭和","value":3},{"category":4,"name":"曾宪植","value":6},{"category":4,"name":"叶剑英","value":6},{"category":3,"name":"赵太侔","value":6},{"category":3,"name":"俞珊","value":3},{"category":3,"name":"俞瑾","value":3},{"category":3,"name":"俞启考","value":3},{"category":3,"name":"俞启信","value":3},{"category":3,"name":"俞启威","value":3},{"category":3,"name":"俞启忠","value":3},{"category":4,"name":"俞强声","value":3},{"category":4,"name":"俞正声","value":6},{"category":3,"name":"毛泽东","value":9},{"category":3,"name":"江青","value":6},{"category":0,"name":"范寿钟","value":3},{"category":1,"name":"范文澜","value":6},{"category":1,"name":"范瑾","value":3}],"categories":[{"name":"Root"},{"name":"Node 1"},{"name":"Node 2"},{"name":"Node 3"},{"name":"Leaf"}],"links":[{"source":"曾麟书","target":"曾国藩","name":"父子","weight":1},{"source":"曾麟书","target":"曾国荃","name":"父子","weight":1},{"source":"曾麟书","target":"曾国潢","name":"父子","weight":1},{"source":"曾国藩","target":"曾纪泽","name":"父子","weight":1},{"source":"曾国藩","target":"曾纪鸿","name":"父子","weight":1},{"source":"曾国潢","target":"曾纪梁","name":"父子","weight":1},{"source":"曾纪梁","target":"曾广祚","name":"父子","weight":1},{"source":"曾广祚","target":"曾昭抡","name":"父子","weight":1},{"source":"曾国荃","target":"曾广江","name":"父子","weight":1},{"source":"曾广江","target":"曾昭和","name":"父子","weight":1},{"source":"曾昭和","target":"曾宪植","name":"父女","weight":1},{"source":"叶剑英","target":"曾宪植","name":"夫妻","weight":1},{"source":"曾纪鸿","target":"曾广珊","name":"父女","weight":1},{"source":"俞文葆","target":"俞明震","name":"父子","weight":1},{"source":"俞文葆","target":"俞明颐","name":"父子","weight":1},{"source":"俞文葆","target":"俞明诗","name":"父女","weight":1},{"source":"陈宝箴","target":"陈三立","name":"父子","weight":1},{"source":"陈三立","target":"俞明诗","name":"夫妻","weight":1},{"source":"陈三立","target":"陈寅恪","name":"父子","weight":1},{"source":"陈三立","target":"陈衡恪","name":"父子","weight":1},{"source":"俞明颐","target":"曾广珊","name":"夫妻","weight":1},{"source":"俞明颐","target":"俞大维","name":"父子","weight":1},{"source":"俞大维","target":"俞扬和","name":"父子","weight":1},{"source":"俞明颐","target":"俞大拔","name":"父子","weight":1},{"source":"俞明颐","target":"俞大纲","name":"父子","weight":1},{"source":"俞明颐","target":"俞大缜","name":"父子","weight":1},{"source":"俞明颐","target":"俞大絪","name":"父女","weight":1},{"source":"俞明颐","target":"俞大彩","name":"父女","weight":1},{"source":"俞明震","target":"俞大纯","name":"父子","weight":1},{"source":"赵太侔","target":"俞珊","name":"夫妻","weight":1},{"source":"俞大纯","target":"俞珊","name":"父女","weight":1},{"source":"俞大纯","target":"俞瑾","name":"父女","weight":1},{"source":"俞大纯","target":"俞启考","name":"父子","weight":1},{"source":"俞大纯","target":"俞启信","name":"父子","weight":1},{"source":"俞大纯","target":"俞启威","name":"父子","weight":1},{"source":"俞启威","target":"江青","name":"夫妻","weight":1},{"source":"毛泽东","target":"江青","name":"夫妻","weight":1},{"source":"俞大纯","target":"俞启忠","name":"父子","weight":1},{"source":"俞启威","target":"俞强声","name":"父子","weight":1},{"source":"俞启威","target":"俞正声","name":"父子","weight":1},{"source":"曾昭抡","target":"俞大絪","name":"夫妻","weight":1},{"source":"傅斯年","target":"俞大彩","name":"夫妻","weight":1},{"source":"蒋介石","target":"蒋经国","name":"父子","weight":1},{"source":"蒋经国","target":"蒋孝章","name":"父女","weight":1},{"source":"俞扬和","target":"蒋孝章","name":"夫妻","weight":1},{"source":"俞扬和","target":"俞祖声","name":"父子","weight":1},{"source":"范寿钟","target":"范文澜","name":"父子","weight":1},{"source":"范寿钟","target":"范瑾","name":"父女","weight":1},{"source":"俞启威","target":"范瑾","name":"夫妻","weight":1}],"ribbonType":false,"showScale":false,"showScaleText":false}],"legend":{"show":true,"data":["Root","Node 1","Node 2","Node 3","Leaf"],"x":"left","y":"top","orient":"horizontal"},"xAxis":[{"type":"category","show":false,"position":"bottom","name":"","nameLocation":"end","boundaryGap":[0,0],"scale":true,"axisLine":{"show":true,"onZero":false},"axisTick":{"show":false},"axisLabel":{"show":true},"splitLine":{"show":true},"splitArea":{"show":false},"data":["曾麟书","曾国藩","曾国潢","曾纪梁","曾广祚","曾国荃","曾广江","曾昭和","叶剑英","曾纪鸿","俞文葆","陈宝箴","陈三立","俞明颐","俞大维","俞明震","赵太侔","俞大纯","俞启威","毛泽东","曾昭抡","傅斯年","蒋介石","蒋经国","俞扬和","范寿钟","曾纪泽","曾广珊","俞明诗","陈寅恪","陈衡恪","俞大拔","俞大纲","俞大缜","俞大絪","俞大彩","蒋孝章","俞祖声","曾宪植","俞珊","俞瑾","俞启考","俞启信","俞启忠","俞强声","俞正声","江青","范文澜","范瑾"]}],"yAxis":[{"type":"value","show":false,"position":"left","name":"","nameLocation":"end","boundaryGap":[0,0],"scale":true,"axisLine":{"show":true,"onZero":false},"axisTick":{"show":false},"axisLabel":{"show":true},"splitLine":{"show":true},"splitArea":{"show":false}}],"grid":{"borderWidth":0},"tooltip":{"show":true,"trigger":"item","axisPointer":{"type":"none","crossStyle":{"type":"dashed"},"lineStyle":{"type":"solid","width":1},"shadowStyle":{"color":"rgba(150,150,150,0.3)","width":"auto","type":"default"}},"textStyle":{"color":"#fff"},"formatter":"function (params) {\n    if (params.indicator2) {    // is edge\n        if (isNaN(params.value.weight)){\n            return params.indicator + \" -> \"\n            + params.indicator2 + \" (\" + params.name + \")\";\n        } else {\n            return params.indicator + \" -> \"\n            + params.indicator2 + \" (\" + params.name + \") : \"\n            + params.value.weight;\n        }\n\n    } else {    // is node\n        return params.name;\n    }\n    }","islandFormatter":"{a} < br/>{b} : {c}","enterable":false,"showDelay":20,"hideDelay":100,"transitionDuration":0.4,"backgroundColor":"rgba(0,0,0,0.7)","borderColor":"#333","borderWidth":0,"borderRadius":4},"toolbox":{"show":true,"feature":{"mark":{"show":true},"dataZoom":{"show":false},"dataView":{"show":false},"magicType":{"show":true,"type":["force","chord"]},"restore":{"show":true},"saveAsImage":{"show":true}},"x":"right","y":"top","orient":"horizontal"},"title":{"text":"Yu Family of Shaoxing","x":"center","y":"bottom","orient":"horizontal"},"color":["#CD853F","#00CD00","#00EE00","#7CFC00","#C0FF3E"]},"evals":["tooltip.formatter"],"jsHooks":[]}</script>
</td>
<td>
<div id="htmlwidget-5e4521954b18f9ad74e2" style="width:400px;height:300px;" class="echarts html-widget"></div>
<script type="application/json" data-for="htmlwidget-5e4521954b18f9ad74e2">{"x":{"series":[{"type":"force","name":"Connection","roam":"move","itemStyle":{"normal":{"label":{"show":true,"textStyle":{"color":"#333"}},"nodeStyle":{"brushType":"both","strokeColor":"rgba(255,215,0,0.4)"},"linkStyle":{"type":"line"}},"emphasis":{"label":{"show":false},"nodeStyle":[],"lineStyle":[]}},"minRadius":8,"maxRadius":20,"nodes":[{"category":0,"name":"曾麟书","value":3},{"category":1,"name":"曾国藩","value":9},{"category":2,"name":"曾纪泽","value":3},{"category":2,"name":"曾纪鸿","value":3},{"category":3,"name":"曾广珊","value":3},{"category":0,"name":"俞文葆","value":3},{"category":1,"name":"俞明震","value":6},{"category":1,"name":"俞明颐","value":3},{"category":1,"name":"俞明诗","value":3},{"category":0,"name":"陈宝箴","value":6},{"category":1,"name":"陈三立","value":3},{"category":2,"name":"陈寅恪","value":9},{"category":2,"name":"陈衡恪","value":3},{"category":2,"name":"俞大维","value":3},{"category":2,"name":"俞大拔","value":3},{"category":2,"name":"俞大纲","value":3},{"category":2,"name":"俞大缜","value":3},{"category":1,"name":"曾国潢","value":3},{"category":2,"name":"曾纪梁","value":3},{"category":3,"name":"曾广祚","value":3},{"category":4,"name":"曾昭抡","value":6},{"category":2,"name":"俞大絪","value":3},{"category":2,"name":"傅斯年","value":6},{"category":2,"name":"俞大彩","value":3},{"category":0,"name":"蒋介石","value":9},{"category":1,"name":"蒋经国","value":9},{"category":3,"name":"俞扬和","value":3},{"category":2,"name":"蒋孝章","value":3},{"category":4,"name":"俞祖声","value":3},{"category":2,"name":"俞大纯","value":3},{"category":1,"name":"曾国荃","value":6},{"category":2,"name":"曾广江","value":3},{"category":3,"name":"曾昭和","value":3},{"category":4,"name":"曾宪植","value":6},{"category":4,"name":"叶剑英","value":6},{"category":3,"name":"赵太侔","value":6},{"category":3,"name":"俞珊","value":3},{"category":3,"name":"俞瑾","value":3},{"category":3,"name":"俞启考","value":3},{"category":3,"name":"俞启信","value":3},{"category":3,"name":"俞启威","value":3},{"category":3,"name":"俞启忠","value":3},{"category":4,"name":"俞强声","value":3},{"category":4,"name":"俞正声","value":6},{"category":3,"name":"毛泽东","value":9},{"category":3,"name":"江青","value":6},{"category":0,"name":"范寿钟","value":3},{"category":1,"name":"范文澜","value":6},{"category":1,"name":"范瑾","value":3}],"categories":[{"name":"Root"},{"name":"Node 1"},{"name":"Node 2"},{"name":"Node 3"},{"name":"Leaf"}],"links":[{"source":"曾麟书","target":"曾国藩","name":"父子","weight":1},{"source":"曾麟书","target":"曾国荃","name":"父子","weight":1},{"source":"曾麟书","target":"曾国潢","name":"父子","weight":1},{"source":"曾国藩","target":"曾纪泽","name":"父子","weight":1},{"source":"曾国藩","target":"曾纪鸿","name":"父子","weight":1},{"source":"曾国潢","target":"曾纪梁","name":"父子","weight":1},{"source":"曾纪梁","target":"曾广祚","name":"父子","weight":1},{"source":"曾广祚","target":"曾昭抡","name":"父子","weight":1},{"source":"曾国荃","target":"曾广江","name":"父子","weight":1},{"source":"曾广江","target":"曾昭和","name":"父子","weight":1},{"source":"曾昭和","target":"曾宪植","name":"父女","weight":1},{"source":"叶剑英","target":"曾宪植","name":"夫妻","weight":1},{"source":"曾纪鸿","target":"曾广珊","name":"父女","weight":1},{"source":"俞文葆","target":"俞明震","name":"父子","weight":1},{"source":"俞文葆","target":"俞明颐","name":"父子","weight":1},{"source":"俞文葆","target":"俞明诗","name":"父女","weight":1},{"source":"陈宝箴","target":"陈三立","name":"父子","weight":1},{"source":"陈三立","target":"俞明诗","name":"夫妻","weight":1},{"source":"陈三立","target":"陈寅恪","name":"父子","weight":1},{"source":"陈三立","target":"陈衡恪","name":"父子","weight":1},{"source":"俞明颐","target":"曾广珊","name":"夫妻","weight":1},{"source":"俞明颐","target":"俞大维","name":"父子","weight":1},{"source":"俞大维","target":"俞扬和","name":"父子","weight":1},{"source":"俞明颐","target":"俞大拔","name":"父子","weight":1},{"source":"俞明颐","target":"俞大纲","name":"父子","weight":1},{"source":"俞明颐","target":"俞大缜","name":"父子","weight":1},{"source":"俞明颐","target":"俞大絪","name":"父女","weight":1},{"source":"俞明颐","target":"俞大彩","name":"父女","weight":1},{"source":"俞明震","target":"俞大纯","name":"父子","weight":1},{"source":"赵太侔","target":"俞珊","name":"夫妻","weight":1},{"source":"俞大纯","target":"俞珊","name":"父女","weight":1},{"source":"俞大纯","target":"俞瑾","name":"父女","weight":1},{"source":"俞大纯","target":"俞启考","name":"父子","weight":1},{"source":"俞大纯","target":"俞启信","name":"父子","weight":1},{"source":"俞大纯","target":"俞启威","name":"父子","weight":1},{"source":"俞启威","target":"江青","name":"夫妻","weight":1},{"source":"毛泽东","target":"江青","name":"夫妻","weight":1},{"source":"俞大纯","target":"俞启忠","name":"父子","weight":1},{"source":"俞启威","target":"俞强声","name":"父子","weight":1},{"source":"俞启威","target":"俞正声","name":"父子","weight":1},{"source":"曾昭抡","target":"俞大絪","name":"夫妻","weight":1},{"source":"傅斯年","target":"俞大彩","name":"夫妻","weight":1},{"source":"蒋介石","target":"蒋经国","name":"父子","weight":1},{"source":"蒋经国","target":"蒋孝章","name":"父女","weight":1},{"source":"俞扬和","target":"蒋孝章","name":"夫妻","weight":1},{"source":"俞扬和","target":"俞祖声","name":"父子","weight":1},{"source":"范寿钟","target":"范文澜","name":"父子","weight":1},{"source":"范寿钟","target":"范瑾","name":"父女","weight":1},{"source":"俞启威","target":"范瑾","name":"夫妻","weight":1}],"ribbonType":false,"showScale":false,"showScaleText":false}],"legend":{"show":true,"data":["Root","Node 1","Node 2","Node 3","Leaf"],"x":"left","y":"top","orient":"horizontal"},"xAxis":[{"type":"category","show":false,"position":"bottom","name":"","nameLocation":"end","boundaryGap":[0,0],"scale":true,"axisLine":{"show":true,"onZero":false},"axisTick":{"show":false},"axisLabel":{"show":true},"splitLine":{"show":true},"splitArea":{"show":false},"data":["曾麟书","曾国藩","曾国潢","曾纪梁","曾广祚","曾国荃","曾广江","曾昭和","叶剑英","曾纪鸿","俞文葆","陈宝箴","陈三立","俞明颐","俞大维","俞明震","赵太侔","俞大纯","俞启威","毛泽东","曾昭抡","傅斯年","蒋介石","蒋经国","俞扬和","范寿钟","曾纪泽","曾广珊","俞明诗","陈寅恪","陈衡恪","俞大拔","俞大纲","俞大缜","俞大絪","俞大彩","蒋孝章","俞祖声","曾宪植","俞珊","俞瑾","俞启考","俞启信","俞启忠","俞强声","俞正声","江青","范文澜","范瑾"]}],"yAxis":[{"type":"value","show":false,"position":"left","name":"","nameLocation":"end","boundaryGap":[0,0],"scale":true,"axisLine":{"show":true,"onZero":false},"axisTick":{"show":false},"axisLabel":{"show":true},"splitLine":{"show":true},"splitArea":{"show":false}}],"grid":{"borderWidth":0},"tooltip":{"show":true,"trigger":"item","axisPointer":{"type":"none","crossStyle":{"type":"dashed"},"lineStyle":{"type":"solid","width":1},"shadowStyle":{"color":"rgba(150,150,150,0.3)","width":"auto","type":"default"}},"textStyle":{"color":"#fff"},"formatter":"function (params) {\n    if (params.indicator2) {    // is edge\n        if (isNaN(params.value.weight)){\n            return params.indicator + \" -> \"\n            + params.indicator2 + \" (\" + params.name + \")\";\n        } else {\n            return params.indicator + \" -> \"\n            + params.indicator2 + \" (\" + params.name + \") : \"\n            + params.value.weight;\n        }\n\n    } else {    // is node\n        return params.name;\n    }\n    }","islandFormatter":"{a} < br/>{b} : {c}","enterable":false,"showDelay":20,"hideDelay":100,"transitionDuration":0.4,"backgroundColor":"rgba(0,0,0,0.7)","borderColor":"#333","borderWidth":0,"borderRadius":4},"toolbox":{"show":true,"feature":{"mark":{"show":true},"dataZoom":{"show":false},"dataView":{"show":false},"magicType":{"show":true,"type":["force","chord"]},"restore":{"show":true},"saveAsImage":{"show":true}},"x":"right","y":"top","orient":"horizontal"},"title":{"text":"Yu Family of Shaoxing","x":"center","y":"bottom","orient":"horizontal"},"color":["#CD853F","#00CD00","#00EE00","#7CFC00","#C0FF3E"]},"evals":["tooltip.formatter"],"jsHooks":[]}</script>
</td>
</tr>
</table>
<p>The keys are:</p>
<ul>
<li>data structure:</li>
<li>matrix mode: A data.frame comprising of a column of name, and a numeric matrix. Assign the name column to x, the matrix to y.</li>
<li>node/link mode: node data.frame [x, NA, series, weight]; link data.frame [x, x1, relation, value]. Combine them using <code>rbind</code>. If you don’t provide node data.frame, recharts will build it automatically. Assign the param list [x, x1, series/relation, weight/value] accordingly.</li>
<li>force chart and chord chart are exchangeble by the toolbox buttons.</li>
</ul>
</div>
<div id="function-call" class="section level1">
<h1><span class="header-section-number">2</span> Function Call</h1>
<div class="sourceCode"><pre class="sourceCode r"><code class="sourceCode r"><span class="kw">echartr</span>(data, x, &lt;y&gt;, &lt;series&gt;, &lt;t&gt;, &lt;type&gt;, &lt;subtype&gt;)</code></pre></div>
<table>
<colgroup>
<col width="11%" />
<col width="88%" />
</colgroup>
<thead>
<tr class="header">
<th>Arg</th>
<th>Requirement</th>
</tr>
</thead>
<tbody>
<tr class="odd">
<td><p><strong>data</strong></p></td>
<td><p>source data in the form of data.frame</p></td>
</tr>
<tr class="even">
<td><p><strong>x</strong></p></td>
<td><p>character independent variable. Other type will be coerced to factors. For node/link mode, you must provide two columns of <code>x</code>. For matrix mode, only the first column of <code>x</code> is accepted.</p></td>
</tr>
<tr class="odd">
<td><p><strong>y</strong></p></td>
<td><p>numeric dependent variable. For node/link mode, only the first column of <code>y</code> is accepted. For matrix mode, all the columns of <code>y</code> are accepted.</p></td>
</tr>
<tr class="even">
<td><p>series</p></td>
<td><p>series variable which will be coerced to factors. Only the first one is accepted if multiple variables are provided.</p></td>
</tr>
<tr class="odd">
<td><p>t</p></td>
<td><p>timeline variable which will be coerced to factors. Only the first one is accepted if multiple variables are provided.</p></td>
</tr>
<tr class="even">
<td><p>type</p></td>
<td><p>‘force’/‘force_curve’, ‘force_line’.</p></td>
</tr>
<tr class="odd">
<td><p>subtype</p></td>
<td><ul>
<li>force: c(“arrow”, “triangle”)
<ul>
<li>arrow: The end symbol of the connection lines is arrow.</li>
<li>triangle: The end symbol of the connection lines is triangle</li>
</ul></li>
<li>force_line: c(“arrow”, “triangle”)</li>
</ul></td>
</tr>
</tbody>
</table>
</div>
<div id="showcase" class="section level1">
<h1><span class="header-section-number">3</span> Showcase</h1>
<div id="data-preparation" class="section level2">
<h2><span class="header-section-number">3.1</span> Data Preparation</h2>
<div id="matrix-mode" class="section level3">
<h3><span class="header-section-number">3.1.1</span> Matrix Mode</h3>
<div class="sourceCode"><pre class="sourceCode r"><code class="sourceCode r">grpmtx &lt;-<span class="st"> </span><span class="kw">matrix</span>(<span class="kw">c</span>(<span class="dv">11975</span>, <span class="dv">5871</span>, <span class="dv">8916</span>, <span class="dv">2868</span>, <span class="dv">1951</span>, <span class="dv">10048</span>, <span class="dv">2060</span>, <span class="dv">6171</span>, <span class="dv">8010</span>, <span class="dv">16145</span>,
                   <span class="dv">8090</span>, <span class="dv">8045</span>, <span class="dv">1013</span>, <span class="dv">990</span>, <span class="dv">940</span>, <span class="dv">6907</span>), <span class="dt">byrow=</span><span class="ot">TRUE</span>, <span class="dt">nrow=</span><span class="dv">4</span>)
grpmtx &lt;-<span class="st"> </span><span class="kw">as.data.frame</span>(grpmtx)
<span class="kw">names</span>(grpmtx) &lt;-<span class="st"> </span><span class="kw">paste0</span>(<span class="st">&#39;Group&#39;</span>, <span class="dv">1</span>:<span class="dv">4</span>)
grpmtx$Name &lt;-<span class="st"> </span><span class="kw">paste0</span>(<span class="st">&#39;Group&#39;</span>, <span class="dv">1</span>:<span class="dv">4</span>)
knitr::<span class="kw">kable</span>(grpmtx, <span class="dt">align=</span><span class="kw">c</span>(<span class="st">&#39;lllll&#39;</span>))</code></pre></div>
<table>
<thead>
<tr class="header">
<th align="left">Group1</th>
<th align="left">Group2</th>
<th align="left">Group3</th>
<th align="left">Group4</th>
<th align="left">Name</th>
</tr>
</thead>
<tbody>
<tr class="odd">
<td align="left">11975</td>
<td align="left">5871</td>
<td align="left">8916</td>
<td align="left">2868</td>
<td align="left">Group1</td>
</tr>
<tr class="even">
<td align="left">1951</td>
<td align="left">10048</td>
<td align="left">2060</td>
<td align="left">6171</td>
<td align="left">Group2</td>
</tr>
<tr class="odd">
<td align="left">8010</td>
<td align="left">16145</td>
<td align="left">8090</td>
<td align="left">8045</td>
<td align="left">Group3</td>
</tr>
<tr class="even">
<td align="left">1013</td>
<td align="left">990</td>
<td align="left">940</td>
<td align="left">6907</td>
<td align="left">Group4</td>
</tr>
</tbody>
</table>
<p>The first 4 columns are exactly a matrix structure and the last column is a name vector. So this meets data structure requirements for matrix mode.</p>
<p>Matrix mode can be transformed to node/link mode as well. Matrix[i, j] represents 2 nodes (i &amp; j) and 1 link (i -&gt; j).</p>
</div>
<div id="nodelink-mode" class="section level3">
<h3><span class="header-section-number">3.1.2</span> Node/link Mode</h3>
<div class="sourceCode"><pre class="sourceCode r"><code class="sourceCode r"><span class="kw">str</span>(yuNetwork)</code></pre></div>
<pre><code>## List of 2
##  $ nodes:&#39;data.frame&#39;:   49 obs. of  3 variables:
##   ..$ name  : chr [1:49] &quot;曾麟书&quot; &quot;曾国藩&quot; &quot;曾纪泽&quot; &quot;曾纪鸿&quot; ...
##   ..$ series: chr [1:49] &quot;Root&quot; &quot;Node 1&quot; &quot;Node 2&quot; &quot;Node 2&quot; ...
##   ..$ value : num [1:49] 3 9 3 3 3 3 6 3 3 6 ...
##  $ links:&#39;data.frame&#39;:   49 obs. of  4 variables:
##   ..$ source  : chr [1:49] &quot;曾麟书&quot; &quot;曾麟书&quot; &quot;曾麟书&quot; &quot;曾国藩&quot; ...
##   ..$ target  : chr [1:49] &quot;曾国藩&quot; &quot;曾国荃&quot; &quot;曾国潢&quot; &quot;曾纪泽&quot; ...
##   ..$ relation: chr [1:49] &quot;父子&quot; &quot;父子&quot; &quot;父子&quot; &quot;父子&quot; ...
##   ..$ weight  : num [1:49] 1 1 1 1 1 1 1 1 1 1 ...</code></pre>
<p>The yuNetwork dataset contains a nodes data.frame and a links data.frame. You can then combine them into one.</p>
<ul>
<li>nodes:
<ul>
<li><code>name</code>: the nodes name,</li>
<li><code>series</code>: the series that the nodes belongs to,</li>
<li><code>value</code>: the importance score of the nodes.</li>
</ul></li>
<li>links:
<ul>
<li><code>source</code> and <code>target</code>: defines the connections,</li>
<li><code>relation</code>: the name of the connections,</li>
<li><code>weight</code>: the importance sorce of the connections.</li>
</ul></li>
</ul>
<div class="sourceCode"><pre class="sourceCode r"><code class="sourceCode r">nodes &lt;-<span class="st"> </span><span class="kw">cbind</span>(yuNetwork$nodes[,<span class="dv">1</span>], <span class="ot">NA</span>, yuNetwork$nodes[,<span class="dv">2</span>:<span class="dv">3</span>],
               <span class="dt">stringsAsFactors=</span><span class="ot">FALSE</span>)
<span class="kw">names</span>(nodes) &lt;-<span class="st"> </span><span class="kw">names</span>(yuNetwork$links)
yu &lt;-<span class="st"> </span><span class="kw">rbind</span>(yuNetwork$links, nodes, <span class="dt">stringsAsFactors=</span><span class="ot">FALSE</span>)</code></pre></div>
</div>
</div>
<div id="force-chart" class="section level2">
<h2><span class="header-section-number">3.2</span> Force Chart</h2>
<div id="force-with-curve" class="section level3">
<h3><span class="header-section-number">3.2.1</span> Force with Curve</h3>
<p>Set <code>type</code> ‘force’.</p>
<div class="sourceCode"><pre class="sourceCode r"><code class="sourceCode r"><span class="kw">echartr</span>(yu, <span class="kw">c</span>(source, target), weight, relation, <span class="dt">type=</span><span class="st">&#39;force&#39;</span>) %&gt;%<span class="st"> </span>
<span class="st">    </span><span class="kw">setTitle</span>(<span class="st">&quot;Yu Family of Shaoxing&quot;</span>) %&gt;%<span class="st"> </span><span class="kw">setTheme</span>(<span class="dt">palette=</span><span class="kw">c</span>(
        <span class="st">&#39;tan3&#39;</span>,<span class="st">&#39;green3&#39;</span>,<span class="st">&#39;green2&#39;</span>,<span class="st">&#39;lawngreen&#39;</span>,<span class="st">&#39;olivedrab1&#39;</span>))</code></pre></div>
<div id="htmlwidget-0dc7aa3edf2ccf425fea" style="width:672px;height:480px;" class="echarts html-widget"></div>
<script type="application/json" data-for="htmlwidget-0dc7aa3edf2ccf425fea">{"x":{"series":[{"type":"force","name":"Connection","roam":"move","itemStyle":{"normal":{"label":{"show":true,"textStyle":{"color":"#333"}},"nodeStyle":{"brushType":"both","strokeColor":"rgba(255,215,0,0.4)"},"linkStyle":{"type":"curve"}},"emphasis":{"label":{"show":false},"nodeStyle":[],"lineStyle":[]}},"minRadius":8,"maxRadius":20,"nodes":[{"category":0,"name":"曾麟书","value":3},{"category":1,"name":"曾国藩","value":9},{"category":2,"name":"曾纪泽","value":3},{"category":2,"name":"曾纪鸿","value":3},{"category":3,"name":"曾广珊","value":3},{"category":0,"name":"俞文葆","value":3},{"category":1,"name":"俞明震","value":6},{"category":1,"name":"俞明颐","value":3},{"category":1,"name":"俞明诗","value":3},{"category":0,"name":"陈宝箴","value":6},{"category":1,"name":"陈三立","value":3},{"category":2,"name":"陈寅恪","value":9},{"category":2,"name":"陈衡恪","value":3},{"category":2,"name":"俞大维","value":3},{"category":2,"name":"俞大拔","value":3},{"category":2,"name":"俞大纲","value":3},{"category":2,"name":"俞大缜","value":3},{"category":1,"name":"曾国潢","value":3},{"category":2,"name":"曾纪梁","value":3},{"category":3,"name":"曾广祚","value":3},{"category":4,"name":"曾昭抡","value":6},{"category":2,"name":"俞大絪","value":3},{"category":2,"name":"傅斯年","value":6},{"category":2,"name":"俞大彩","value":3},{"category":0,"name":"蒋介石","value":9},{"category":1,"name":"蒋经国","value":9},{"category":3,"name":"俞扬和","value":3},{"category":2,"name":"蒋孝章","value":3},{"category":4,"name":"俞祖声","value":3},{"category":2,"name":"俞大纯","value":3},{"category":1,"name":"曾国荃","value":6},{"category":2,"name":"曾广江","value":3},{"category":3,"name":"曾昭和","value":3},{"category":4,"name":"曾宪植","value":6},{"category":4,"name":"叶剑英","value":6},{"category":3,"name":"赵太侔","value":6},{"category":3,"name":"俞珊","value":3},{"category":3,"name":"俞瑾","value":3},{"category":3,"name":"俞启考","value":3},{"category":3,"name":"俞启信","value":3},{"category":3,"name":"俞启威","value":3},{"category":3,"name":"俞启忠","value":3},{"category":4,"name":"俞强声","value":3},{"category":4,"name":"俞正声","value":6},{"category":3,"name":"毛泽东","value":9},{"category":3,"name":"江青","value":6},{"category":0,"name":"范寿钟","value":3},{"category":1,"name":"范文澜","value":6},{"category":1,"name":"范瑾","value":3}],"categories":[{"name":"Root"},{"name":"Node 1"},{"name":"Node 2"},{"name":"Node 3"},{"name":"Leaf"}],"links":[{"source":"曾麟书","target":"曾国藩","name":"父子","weight":1},{"source":"曾麟书","target":"曾国荃","name":"父子","weight":1},{"source":"曾麟书","target":"曾国潢","name":"父子","weight":1},{"source":"曾国藩","target":"曾纪泽","name":"父子","weight":1},{"source":"曾国藩","target":"曾纪鸿","name":"父子","weight":1},{"source":"曾国潢","target":"曾纪梁","name":"父子","weight":1},{"source":"曾纪梁","target":"曾广祚","name":"父子","weight":1},{"source":"曾广祚","target":"曾昭抡","name":"父子","weight":1},{"source":"曾国荃","target":"曾广江","name":"父子","weight":1},{"source":"曾广江","target":"曾昭和","name":"父子","weight":1},{"source":"曾昭和","target":"曾宪植","name":"父女","weight":1},{"source":"叶剑英","target":"曾宪植","name":"夫妻","weight":1},{"source":"曾纪鸿","target":"曾广珊","name":"父女","weight":1},{"source":"俞文葆","target":"俞明震","name":"父子","weight":1},{"source":"俞文葆","target":"俞明颐","name":"父子","weight":1},{"source":"俞文葆","target":"俞明诗","name":"父女","weight":1},{"source":"陈宝箴","target":"陈三立","name":"父子","weight":1},{"source":"陈三立","target":"俞明诗","name":"夫妻","weight":1},{"source":"陈三立","target":"陈寅恪","name":"父子","weight":1},{"source":"陈三立","target":"陈衡恪","name":"父子","weight":1},{"source":"俞明颐","target":"曾广珊","name":"夫妻","weight":1},{"source":"俞明颐","target":"俞大维","name":"父子","weight":1},{"source":"俞大维","target":"俞扬和","name":"父子","weight":1},{"source":"俞明颐","target":"俞大拔","name":"父子","weight":1},{"source":"俞明颐","target":"俞大纲","name":"父子","weight":1},{"source":"俞明颐","target":"俞大缜","name":"父子","weight":1},{"source":"俞明颐","target":"俞大絪","name":"父女","weight":1},{"source":"俞明颐","target":"俞大彩","name":"父女","weight":1},{"source":"俞明震","target":"俞大纯","name":"父子","weight":1},{"source":"赵太侔","target":"俞珊","name":"夫妻","weight":1},{"source":"俞大纯","target":"俞珊","name":"父女","weight":1},{"source":"俞大纯","target":"俞瑾","name":"父女","weight":1},{"source":"俞大纯","target":"俞启考","name":"父子","weight":1},{"source":"俞大纯","target":"俞启信","name":"父子","weight":1},{"source":"俞大纯","target":"俞启威","name":"父子","weight":1},{"source":"俞启威","target":"江青","name":"夫妻","weight":1},{"source":"毛泽东","target":"江青","name":"夫妻","weight":1},{"source":"俞大纯","target":"俞启忠","name":"父子","weight":1},{"source":"俞启威","target":"俞强声","name":"父子","weight":1},{"source":"俞启威","target":"俞正声","name":"父子","weight":1},{"source":"曾昭抡","target":"俞大絪","name":"夫妻","weight":1},{"source":"傅斯年","target":"俞大彩","name":"夫妻","weight":1},{"source":"蒋介石","target":"蒋经国","name":"父子","weight":1},{"source":"蒋经国","target":"蒋孝章","name":"父女","weight":1},{"source":"俞扬和","target":"蒋孝章","name":"夫妻","weight":1},{"source":"俞扬和","target":"俞祖声","name":"父子","weight":1},{"source":"范寿钟","target":"范文澜","name":"父子","weight":1},{"source":"范寿钟","target":"范瑾","name":"父女","weight":1},{"source":"俞启威","target":"范瑾","name":"夫妻","weight":1}],"ribbonType":false,"showScale":false,"showScaleText":false}],"legend":{"show":true,"data":["Root","Node 1","Node 2","Node 3","Leaf"],"x":"left","y":"top","orient":"horizontal"},"xAxis":[{"type":"category","show":false,"position":"bottom","name":"","nameLocation":"end","boundaryGap":[0,0],"scale":true,"axisLine":{"show":true,"onZero":false},"axisTick":{"show":false},"axisLabel":{"show":true},"splitLine":{"show":true},"splitArea":{"show":false},"data":["曾麟书","曾国藩","曾国潢","曾纪梁","曾广祚","曾国荃","曾广江","曾昭和","叶剑英","曾纪鸿","俞文葆","陈宝箴","陈三立","俞明颐","俞大维","俞明震","赵太侔","俞大纯","俞启威","毛泽东","曾昭抡","傅斯年","蒋介石","蒋经国","俞扬和","范寿钟","曾纪泽","曾广珊","俞明诗","陈寅恪","陈衡恪","俞大拔","俞大纲","俞大缜","俞大絪","俞大彩","蒋孝章","俞祖声","曾宪植","俞珊","俞瑾","俞启考","俞启信","俞启忠","俞强声","俞正声","江青","范文澜","范瑾"]}],"yAxis":[{"type":"value","show":false,"position":"left","name":"","nameLocation":"end","boundaryGap":[0,0],"scale":true,"axisLine":{"show":true,"onZero":false},"axisTick":{"show":false},"axisLabel":{"show":true},"splitLine":{"show":true},"splitArea":{"show":false}}],"grid":{"borderWidth":0},"tooltip":{"show":true,"trigger":"item","axisPointer":{"type":"none","crossStyle":{"type":"dashed"},"lineStyle":{"type":"solid","width":1},"shadowStyle":{"color":"rgba(150,150,150,0.3)","width":"auto","type":"default"}},"textStyle":{"color":"#fff"},"formatter":"function (params) {\n    if (params.indicator2) {    // is edge\n        if (isNaN(params.value.weight)){\n            return params.indicator + \" -> \"\n            + params.indicator2 + \" (\" + params.name + \")\";\n        } else {\n            return params.indicator + \" -> \"\n            + params.indicator2 + \" (\" + params.name + \") : \"\n            + params.value.weight;\n        }\n\n    } else {    // is node\n        return params.name;\n    }\n    }","islandFormatter":"{a} < br/>{b} : {c}","enterable":false,"showDelay":20,"hideDelay":100,"transitionDuration":0.4,"backgroundColor":"rgba(0,0,0,0.7)","borderColor":"#333","borderWidth":0,"borderRadius":4},"toolbox":{"show":true,"feature":{"mark":{"show":true},"dataZoom":{"show":false},"dataView":{"show":false},"magicType":{"show":true,"type":["force","chord"]},"restore":{"show":true},"saveAsImage":{"show":true}},"x":"right","y":"top","orient":"horizontal"},"title":{"text":"Yu Family of Shaoxing","x":"center","y":"bottom","orient":"horizontal"},"color":["#CD853F","#00CD00","#00EE00","#7CFC00","#C0FF3E"]},"evals":["tooltip.formatter"],"jsHooks":[]}</script>
</div>
<div id="force-with-line" class="section level3">
<h3><span class="header-section-number">3.2.2</span> Force with Line</h3>
<div id="matrix-mode-1" class="section level4">
<h4><span class="header-section-number">3.2.2.1</span> Matrix Mode</h4>
<div class="sourceCode"><pre class="sourceCode r"><code class="sourceCode r"><span class="kw">echartr</span>(grpmtx, Name, <span class="kw">c</span>(Group1, Group2, Group3, Group4), <span class="dt">type=</span><span class="st">&#39;force_line&#39;</span>) %&gt;%<span class="st"> </span>
<span class="st">  </span><span class="kw">setTitle</span>(<span class="st">&#39;Test Data&#39;</span>, <span class="st">&#39;Force with ribbon&#39;</span>)</code></pre></div>
<div id="htmlwidget-40c2115f413c211d2ab0" style="width:672px;height:480px;" class="echarts html-widget"></div>
<script type="application/json" data-for="htmlwidget-40c2115f413c211d2ab0">{"x":{"series":[{"type":"force","name":"Connection","roam":"move","itemStyle":{"normal":{"label":{"show":true,"textStyle":{"color":"#333"}},"nodeStyle":{"brushType":"both","strokeColor":"rgba(255,215,0,0.4)"},"linkStyle":{"type":"line"}},"emphasis":{"label":{"show":false},"nodeStyle":[],"lineStyle":[]}},"minRadius":8,"maxRadius":20,"matrix":[[11975,5871,8916,2868],[1951,10048,2060,6171],[8010,16145,8090,8045],[1013,990,940,6907]],"data":[{"name":"Group1"},{"name":"Group2"},{"name":"Group3"},{"name":"Group4"}],"ribbonType":true,"showScale":false,"showScaleText":false}],"xAxis":[{"type":"category","show":false,"position":"bottom","name":"","nameLocation":"end","boundaryGap":[0,0],"scale":true,"axisLine":{"show":true,"onZero":false},"axisTick":{"show":false},"axisLabel":{"show":true},"splitLine":{"show":true},"splitArea":{"show":false},"data":["Group1","Group2","Group3","Group4"]}],"yAxis":[{"type":"value","show":false,"position":"left","name":"","nameLocation":"end","boundaryGap":[0,0],"scale":true,"axisLine":{"show":true,"onZero":false},"axisTick":{"show":false},"axisLabel":{"show":true},"splitLine":{"show":true},"splitArea":{"show":false}}],"grid":{"borderWidth":0},"tooltip":{"show":true,"trigger":"item","axisPointer":{"type":"none","crossStyle":{"type":"dashed"},"lineStyle":{"type":"solid","width":1},"shadowStyle":{"color":"rgba(150,150,150,0.3)","width":"auto","type":"default"}},"textStyle":{"color":"#fff"},"formatter":"function (params) {\n    if (params.indicator2) {    // is edge\n        if (isNaN(params.value.weight)){\n            return params.indicator + \" -> \"\n            + params.indicator2 + \" (\" + params.name + \")\";\n        } else {\n            return params.indicator + \" -> \"\n            + params.indicator2 + \" (\" + params.name + \") : \"\n            + params.value.weight;\n        }\n\n    } else {    // is node\n        return params.name;\n    }\n    }","islandFormatter":"{a} < br/>{b} : {c}","enterable":false,"showDelay":20,"hideDelay":100,"transitionDuration":0.4,"backgroundColor":"rgba(0,0,0,0.7)","borderColor":"#333","borderWidth":0,"borderRadius":4},"toolbox":{"show":true,"feature":{"mark":{"show":true},"dataZoom":{"show":false},"dataView":{"show":false},"magicType":{"show":true,"type":["force","chord"]},"restore":{"show":true},"saveAsImage":{"show":true}},"x":"right","y":"top","orient":"horizontal"},"legend":{"show":true,"data":["Group1","Group2","Group3","Group4"],"x":"left","y":"top","orient":"horizontal"},"title":{"text":"Test Data","subtext":"Force with ribbon","x":"center","y":"bottom","orient":"horizontal"}},"evals":["tooltip.formatter"],"jsHooks":[]}</script>
</div>
<div id="nodelink-mode-1" class="section level4">
<h4><span class="header-section-number">3.2.2.2</span> Node/link Mode</h4>
<p>Set <code>type</code> ‘force_line’.</p>
<div class="sourceCode"><pre class="sourceCode r"><code class="sourceCode r"><span class="kw">echartr</span>(yu, <span class="kw">c</span>(source, target), weight, relation, <span class="dt">type=</span><span class="st">&#39;force_line&#39;</span>) %&gt;%<span class="st"> </span>
<span class="st">    </span><span class="kw">setTitle</span>(<span class="st">&quot;Yu Family of Shaoxing&quot;</span>) %&gt;%<span class="st"> </span><span class="kw">setTheme</span>(<span class="dt">palette=</span><span class="kw">c</span>(
        <span class="st">&#39;tan3&#39;</span>,<span class="st">&#39;green3&#39;</span>,<span class="st">&#39;green2&#39;</span>,<span class="st">&#39;lawngreen&#39;</span>,<span class="st">&#39;olivedrab1&#39;</span>))</code></pre></div>
<div id="htmlwidget-f9843e577513a76e37f8" style="width:672px;height:480px;" class="echarts html-widget"></div>
<script type="application/json" data-for="htmlwidget-f9843e577513a76e37f8">{"x":{"series":[{"type":"force","name":"Connection","roam":"move","itemStyle":{"normal":{"label":{"show":true,"textStyle":{"color":"#333"}},"nodeStyle":{"brushType":"both","strokeColor":"rgba(255,215,0,0.4)"},"linkStyle":{"type":"line"}},"emphasis":{"label":{"show":false},"nodeStyle":[],"lineStyle":[]}},"minRadius":8,"maxRadius":20,"nodes":[{"category":0,"name":"曾麟书","value":3},{"category":1,"name":"曾国藩","value":9},{"category":2,"name":"曾纪泽","value":3},{"category":2,"name":"曾纪鸿","value":3},{"category":3,"name":"曾广珊","value":3},{"category":0,"name":"俞文葆","value":3},{"category":1,"name":"俞明震","value":6},{"category":1,"name":"俞明颐","value":3},{"category":1,"name":"俞明诗","value":3},{"category":0,"name":"陈宝箴","value":6},{"category":1,"name":"陈三立","value":3},{"category":2,"name":"陈寅恪","value":9},{"category":2,"name":"陈衡恪","value":3},{"category":2,"name":"俞大维","value":3},{"category":2,"name":"俞大拔","value":3},{"category":2,"name":"俞大纲","value":3},{"category":2,"name":"俞大缜","value":3},{"category":1,"name":"曾国潢","value":3},{"category":2,"name":"曾纪梁","value":3},{"category":3,"name":"曾广祚","value":3},{"category":4,"name":"曾昭抡","value":6},{"category":2,"name":"俞大絪","value":3},{"category":2,"name":"傅斯年","value":6},{"category":2,"name":"俞大彩","value":3},{"category":0,"name":"蒋介石","value":9},{"category":1,"name":"蒋经国","value":9},{"category":3,"name":"俞扬和","value":3},{"category":2,"name":"蒋孝章","value":3},{"category":4,"name":"俞祖声","value":3},{"category":2,"name":"俞大纯","value":3},{"category":1,"name":"曾国荃","value":6},{"category":2,"name":"曾广江","value":3},{"category":3,"name":"曾昭和","value":3},{"category":4,"name":"曾宪植","value":6},{"category":4,"name":"叶剑英","value":6},{"category":3,"name":"赵太侔","value":6},{"category":3,"name":"俞珊","value":3},{"category":3,"name":"俞瑾","value":3},{"category":3,"name":"俞启考","value":3},{"category":3,"name":"俞启信","value":3},{"category":3,"name":"俞启威","value":3},{"category":3,"name":"俞启忠","value":3},{"category":4,"name":"俞强声","value":3},{"category":4,"name":"俞正声","value":6},{"category":3,"name":"毛泽东","value":9},{"category":3,"name":"江青","value":6},{"category":0,"name":"范寿钟","value":3},{"category":1,"name":"范文澜","value":6},{"category":1,"name":"范瑾","value":3}],"categories":[{"name":"Root"},{"name":"Node 1"},{"name":"Node 2"},{"name":"Node 3"},{"name":"Leaf"}],"links":[{"source":"曾麟书","target":"曾国藩","name":"父子","weight":1},{"source":"曾麟书","target":"曾国荃","name":"父子","weight":1},{"source":"曾麟书","target":"曾国潢","name":"父子","weight":1},{"source":"曾国藩","target":"曾纪泽","name":"父子","weight":1},{"source":"曾国藩","target":"曾纪鸿","name":"父子","weight":1},{"source":"曾国潢","target":"曾纪梁","name":"父子","weight":1},{"source":"曾纪梁","target":"曾广祚","name":"父子","weight":1},{"source":"曾广祚","target":"曾昭抡","name":"父子","weight":1},{"source":"曾国荃","target":"曾广江","name":"父子","weight":1},{"source":"曾广江","target":"曾昭和","name":"父子","weight":1},{"source":"曾昭和","target":"曾宪植","name":"父女","weight":1},{"source":"叶剑英","target":"曾宪植","name":"夫妻","weight":1},{"source":"曾纪鸿","target":"曾广珊","name":"父女","weight":1},{"source":"俞文葆","target":"俞明震","name":"父子","weight":1},{"source":"俞文葆","target":"俞明颐","name":"父子","weight":1},{"source":"俞文葆","target":"俞明诗","name":"父女","weight":1},{"source":"陈宝箴","target":"陈三立","name":"父子","weight":1},{"source":"陈三立","target":"俞明诗","name":"夫妻","weight":1},{"source":"陈三立","target":"陈寅恪","name":"父子","weight":1},{"source":"陈三立","target":"陈衡恪","name":"父子","weight":1},{"source":"俞明颐","target":"曾广珊","name":"夫妻","weight":1},{"source":"俞明颐","target":"俞大维","name":"父子","weight":1},{"source":"俞大维","target":"俞扬和","name":"父子","weight":1},{"source":"俞明颐","target":"俞大拔","name":"父子","weight":1},{"source":"俞明颐","target":"俞大纲","name":"父子","weight":1},{"source":"俞明颐","target":"俞大缜","name":"父子","weight":1},{"source":"俞明颐","target":"俞大絪","name":"父女","weight":1},{"source":"俞明颐","target":"俞大彩","name":"父女","weight":1},{"source":"俞明震","target":"俞大纯","name":"父子","weight":1},{"source":"赵太侔","target":"俞珊","name":"夫妻","weight":1},{"source":"俞大纯","target":"俞珊","name":"父女","weight":1},{"source":"俞大纯","target":"俞瑾","name":"父女","weight":1},{"source":"俞大纯","target":"俞启考","name":"父子","weight":1},{"source":"俞大纯","target":"俞启信","name":"父子","weight":1},{"source":"俞大纯","target":"俞启威","name":"父子","weight":1},{"source":"俞启威","target":"江青","name":"夫妻","weight":1},{"source":"毛泽东","target":"江青","name":"夫妻","weight":1},{"source":"俞大纯","target":"俞启忠","name":"父子","weight":1},{"source":"俞启威","target":"俞强声","name":"父子","weight":1},{"source":"俞启威","target":"俞正声","name":"父子","weight":1},{"source":"曾昭抡","target":"俞大絪","name":"夫妻","weight":1},{"source":"傅斯年","target":"俞大彩","name":"夫妻","weight":1},{"source":"蒋介石","target":"蒋经国","name":"父子","weight":1},{"source":"蒋经国","target":"蒋孝章","name":"父女","weight":1},{"source":"俞扬和","target":"蒋孝章","name":"夫妻","weight":1},{"source":"俞扬和","target":"俞祖声","name":"父子","weight":1},{"source":"范寿钟","target":"范文澜","name":"父子","weight":1},{"source":"范寿钟","target":"范瑾","name":"父女","weight":1},{"source":"俞启威","target":"范瑾","name":"夫妻","weight":1}],"ribbonType":false,"showScale":false,"showScaleText":false}],"legend":{"show":true,"data":["Root","Node 1","Node 2","Node 3","Leaf"],"x":"left","y":"top","orient":"horizontal"},"xAxis":[{"type":"category","show":false,"position":"bottom","name":"","nameLocation":"end","boundaryGap":[0,0],"scale":true,"axisLine":{"show":true,"onZero":false},"axisTick":{"show":false},"axisLabel":{"show":true},"splitLine":{"show":true},"splitArea":{"show":false},"data":["曾麟书","曾国藩","曾国潢","曾纪梁","曾广祚","曾国荃","曾广江","曾昭和","叶剑英","曾纪鸿","俞文葆","陈宝箴","陈三立","俞明颐","俞大维","俞明震","赵太侔","俞大纯","俞启威","毛泽东","曾昭抡","傅斯年","蒋介石","蒋经国","俞扬和","范寿钟","曾纪泽","曾广珊","俞明诗","陈寅恪","陈衡恪","俞大拔","俞大纲","俞大缜","俞大絪","俞大彩","蒋孝章","俞祖声","曾宪植","俞珊","俞瑾","俞启考","俞启信","俞启忠","俞强声","俞正声","江青","范文澜","范瑾"]}],"yAxis":[{"type":"value","show":false,"position":"left","name":"","nameLocation":"end","boundaryGap":[0,0],"scale":true,"axisLine":{"show":true,"onZero":false},"axisTick":{"show":false},"axisLabel":{"show":true},"splitLine":{"show":true},"splitArea":{"show":false}}],"grid":{"borderWidth":0},"tooltip":{"show":true,"trigger":"item","axisPointer":{"type":"none","crossStyle":{"type":"dashed"},"lineStyle":{"type":"solid","width":1},"shadowStyle":{"color":"rgba(150,150,150,0.3)","width":"auto","type":"default"}},"textStyle":{"color":"#fff"},"formatter":"function (params) {\n    if (params.indicator2) {    // is edge\n        if (isNaN(params.value.weight)){\n            return params.indicator + \" -> \"\n            + params.indicator2 + \" (\" + params.name + \")\";\n        } else {\n            return params.indicator + \" -> \"\n            + params.indicator2 + \" (\" + params.name + \") : \"\n            + params.value.weight;\n        }\n\n    } else {    // is node\n        return params.name;\n    }\n    }","islandFormatter":"{a} < br/>{b} : {c}","enterable":false,"showDelay":20,"hideDelay":100,"transitionDuration":0.4,"backgroundColor":"rgba(0,0,0,0.7)","borderColor":"#333","borderWidth":0,"borderRadius":4},"toolbox":{"show":true,"feature":{"mark":{"show":true},"dataZoom":{"show":false},"dataView":{"show":false},"magicType":{"show":true,"type":["force","chord"]},"restore":{"show":true},"saveAsImage":{"show":true}},"x":"right","y":"top","orient":"horizontal"},"title":{"text":"Yu Family of Shaoxing","x":"center","y":"bottom","orient":"horizontal"},"color":["#CD853F","#00CD00","#00EE00","#7CFC00","#C0FF3E"]},"evals":["tooltip.formatter"],"jsHooks":[]}</script>
</div>
</div>
<div id="force-with-timeline" class="section level3">
<h3><span class="header-section-number">3.2.3</span> Force with Timeline</h3>
<p>Let’s use <code>year</code> columns as timeline.</p>
<div class="sourceCode"><pre class="sourceCode r"><code class="sourceCode r"><span class="kw">echartr</span>(deutsch, <span class="kw">c</span>(club, player), weight, role, <span class="dt">t=</span>year,
        <span class="dt">type=</span><span class="st">&#39;force&#39;</span>, <span class="dt">sub=</span><span class="st">&#39;arrow&#39;</span>) %&gt;%<span class="st"> </span>
<span class="st">  </span><span class="kw">setTitle</span>(<span class="st">&#39;Club Orientation of Deutsch Soccer Team&#39;</span>)</code></pre></div>
<div id="htmlwidget-38a492925a3bffcf6153" style="width:672px;height:480px;" class="echarts html-widget"></div>
<script type="application/json" data-for="htmlwidget-38a492925a3bffcf6153">{"x":{"timeline":{"type":"number","data":[2014,2016],"x":80,"x2":80,"y2":50},"options":[{"series":[{"type":"force","name":"Connection","roam":"move","itemStyle":{"normal":{"label":{"show":true,"textStyle":{"color":"#333"}},"nodeStyle":{"brushType":"both","strokeColor":"rgba(255,215,0,0.4)"},"linkStyle":{"type":"curve"}},"emphasis":{"label":{"show":false},"nodeStyle":[],"lineStyle":[]}},"minRadius":8,"maxRadius":20,"nodes":[{"name":"Monchengladbach"},{"name":"Bayern"},{"name":"Dortmund"},{"name":"Kruse"},{"name":"Kramer"},{"name":"Neuer"},{"name":"Boateng"},{"name":"Lahm"},{"name":"Kroos"},{"name":"Muller"},{"name":"Gotze"},{"name":"Badstuber"},{"name":"Hummels"},{"name":"Weidenfeller"},{"name":"Reus"},{"name":"Gundogan"}],"links":[{"source":"Monchengladbach","target":"Kruse","name":"Fw","weight":1},{"source":"Monchengladbach","target":"Kramer","name":"Mf","weight":1},{"source":"Bayern","target":"Neuer","name":"Gk","weight":1},{"source":"Bayern","target":"Boateng","name":"Df","weight":1},{"source":"Bayern","target":"Lahm","name":"Df","weight":1},{"source":"Bayern","target":"Kroos","name":"Mf","weight":1},{"source":"Bayern","target":"Muller","name":"Mf","weight":1},{"source":"Bayern","target":"Gotze","name":"Fw","weight":1},{"source":"Bayern","target":"Badstuber","name":"Df","weight":1},{"source":"Dortmund","target":"Hummels","name":"Df","weight":1},{"source":"Dortmund","target":"Weidenfeller","name":"Gk","weight":1},{"source":"Dortmund","target":"Reus","name":"Df","weight":1},{"source":"Dortmund","target":"Gundogan","name":"Md","weight":1}],"linkSymbol":"arrow","ribbonType":false,"showScale":false,"showScaleText":false}],"legend":{"show":true,"data":["Monchengladbach","Bayern","Dortmund","Leverkusen","Schalke","Arsenal","Madrid"],"x":"left","y":"top","orient":"horizontal"},"xAxis":[{"type":"category","show":false,"position":"bottom","name":"","nameLocation":"end","boundaryGap":[0,0],"scale":true,"axisLine":{"show":true,"onZero":false},"axisTick":{"show":false},"axisLabel":{"show":true},"splitLine":{"show":true},"splitArea":{"show":false},"data":["Monchengladbach","Bayern","Dortmund","Leverkusen","Schalke","Arsenal","Madrid"]}],"yAxis":[{"type":"value","show":false,"position":"left","name":"","nameLocation":"end","boundaryGap":[0,0],"scale":true,"axisLine":{"show":true,"onZero":false},"axisTick":{"show":false},"axisLabel":{"show":true},"splitLine":{"show":true},"splitArea":{"show":false}}],"grid":{"borderWidth":0},"tooltip":{"show":true,"trigger":"item","axisPointer":{"type":"none","crossStyle":{"type":"dashed"},"lineStyle":{"type":"solid","width":1},"shadowStyle":{"color":"rgba(150,150,150,0.3)","width":"auto","type":"default"}},"textStyle":{"color":"#fff"},"formatter":"function (params) {\n    if (params.indicator2) {    // is edge\n        if (isNaN(params.value.weight)){\n            return params.indicator + \" -> \"\n            + params.indicator2 + \" (\" + params.name + \")\";\n        } else {\n            return params.indicator + \" -> \"\n            + params.indicator2 + \" (\" + params.name + \") : \"\n            + params.value.weight;\n        }\n\n    } else {    // is node\n        return params.name;\n    }\n    }","islandFormatter":"{a} < br/>{b} : {c}","enterable":false,"showDelay":20,"hideDelay":100,"transitionDuration":0.4,"backgroundColor":"rgba(0,0,0,0.7)","borderColor":"#333","borderWidth":0,"borderRadius":4},"toolbox":{"show":true,"feature":{"mark":{"show":true},"dataZoom":{"show":false},"dataView":{"show":false},"magicType":{"show":true,"type":["force","chord"]},"restore":{"show":true},"saveAsImage":{"show":true}},"x":"right","y":"top","orient":"horizontal"},"title":{"text":"Club Orientation of Deutsch Soccer Team (year: 2014)","x":"center","y":"bottom","orient":"horizontal"}},{"series":[{"type":"force","name":"Connection","roam":"move","itemStyle":{"normal":{"label":{"show":true,"textStyle":{"color":"#333"}},"nodeStyle":{"brushType":"both","strokeColor":"rgba(255,215,0,0.4)"},"linkStyle":{"type":"curve"}},"emphasis":{"label":{"show":false},"nodeStyle":[],"lineStyle":[]}},"minRadius":8,"maxRadius":20,"nodes":[{"name":"Bayern"},{"name":"Leverkusen"},{"name":"Schalke"},{"name":"Arsenal"},{"name":"Madrid"},{"name":"Dortmund"},{"name":"Neuer"},{"name":"Leno"},{"name":"Hummels"},{"name":"Kimmich"},{"name":"Howedes"},{"name":"Mustafi"},{"name":"Ozil"},{"name":"Tah"},{"name":"Muller"},{"name":"Meyer"},{"name":"Kroos"},{"name":"Gotze"},{"name":"Volland"}],"links":[{"source":"Bayern","target":"Neuer","name":"Gk","weight":1},{"source":"Leverkusen","target":"Leno","name":"Gk","weight":1},{"source":"Bayern","target":"Hummels","name":"Df","weight":1},{"source":"Bayern","target":"Kimmich","name":"Df","weight":1},{"source":"Schalke","target":"Howedes","name":"Df","weight":1},{"source":"Arsenal","target":"Mustafi","name":"Df","weight":1},{"source":"Arsenal","target":"Ozil","name":"Mf","weight":1},{"source":"Leverkusen","target":"Tah","name":"Mf","weight":1},{"source":"Bayern","target":"Muller","name":"Mf","weight":1},{"source":"Schalke","target":"Meyer","name":"Mf","weight":1},{"source":"Madrid","target":"Kroos","name":"Mf","weight":1},{"source":"Dortmund","target":"Gotze","name":"Fw","weight":1},{"source":"Leverkusen","target":"Volland","name":"Fw","weight":1}],"linkSymbol":"arrow","ribbonType":false,"showScale":false,"showScaleText":false}],"title":{"text":"Club Orientation of Deutsch Soccer Team (year: 2016)","x":"center","y":"bottom","orient":"horizontal"}}]},"evals":["options.0.tooltip.formatter"],"jsHooks":[]}</script>
</div>
</div>
</div>
<div id="futher-setup" class="section level1">
<h1><span class="header-section-number">4</span> Futher Setup</h1>
<p>Then you can configure the widgets, add markLines and/or markPoints, fortify the chart.</p>
<p>You can refer to related functions to play around on your own.</p>
</div>

<script type="text/javascript">
window.onload = function() {
  var i, fig = 1, caps = document.getElementsByClassName('caption');
  for (i = 0; i < caps.length; i++) {
    var cap = caps[i];
    if (cap.parentElement.className !== 'figure' || cap.nodeName !== 'P')
      continue;
    cap.innerHTML = '<span>Figure ' + fig + ':</span> ' + cap.innerHTML;
    fig++;
  }
  fig = 1;
  caps = document.getElementsByTagName('caption');
  for (i = 0; i < caps.length; i++) {
    var cap = caps[i];
    if (cap.parentElement.nodeName !== 'TABLE') continue;
    cap.innerHTML = '<span>Table ' + fig + ':</span> ' + cap.innerHTML;
    fig++;
  }
}
</script>



</div>

<script>

// add bootstrap table styles to pandoc tables
function bootstrapStylePandocTables() {
  $('tr.header').parent('thead').parent('table').addClass('table table-condensed');
}
$(document).ready(function () {
  bootstrapStylePandocTables();
});


</script>

<!-- dynamically load mathjax for compatibility with self-contained -->
<script>
  (function () {
    var script = document.createElement("script");
    script.type = "text/javascript";
    script.src  = "https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML";
    document.getElementsByTagName("head")[0].appendChild(script);
  })();
</script>

</body>
</html>
